<template>
    <el-dialog
        v-model="visible"
        append-to-body
        class="myDialog"
        :title="item.title"
        @close="handleCancel"
        width="913px">
        <div class="list">
        <div class="item" v-for="el in list" :key="el.id" :class="selectIds.includes(el.id)?'on':''" :style="{ backgroundImage: `url(${el.image})` }"  @click.stop="selectItem(el.id)">
            <div class="txt">
            <div class="name">{{ el.title }}</div>
            </div>
            <div class="icon"><Check /></div>         
        </div>
        </div>
        <template v-slot:footer>    
        <div class="btns">
            <el-button type="primary" @click="handleAdd">create a new</el-button>
            <el-button @click="handleCancel">Cancel</el-button>
        </div>       
        
        </template>
    </el-dialog>
</template>
<script setup>
 import {defineProps,ref ,watch,defineEmits} from "vue";
 import {  Check } from '@element-plus/icons-vue'
 const props = defineProps({
      list: {
          type: Array,
          default: []
      },
      item:{
         type: Object,
          default: {}
      },
      open: {
          type: Boolean,
          default: false
      },
    });
    watch(()=>props.open,(val)=>{
        visible.value=val
    },{
        deep:true
    })
   const visible=ref(false)
    // 选中id
    const selectIds=ref([])
    const emit=defineEmits(['closeModal','selectItem'])
    const selectItem=(id)=>{
      let index=selectIds.value.findIndex(item=>item==id)
      if(index>-1){
        selectIds.value.splice(index,1)
      }else{
        selectIds.value.push(id)
      }
    }
    const handleAdd=()=>{
        let data={
            list:selectIds.value
        }
       emit('selectItem',data)
    }
    
    const handleCancel=()=>{
      emit('closeModal',false)
      selectIds.value=[]
    }
</script>
<style lang='scss' scoped>
     .btns {
      display: flex;
      align-items: center;
      justify-content: center;
    } 
   .list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    max-height: 350px;
    overflow: auto;
    .item{
      width: 270px;
      height: 174px;
      border-radius: 10px;
      margin-top: 19px;
      margin-right: 20px;
      background-size: cover;
      cursor: pointer;
      display: flex;
      align-items: flex-end;
      position: relative;
      &.on{
         border: 2px solid RGBA(227, 66, 52, 1);
        .icon{
          display: flex;
        }
      }
      &:nth-child(3n){
        margin-right: 0;
      }
      .txt{
        height: 45px;
      }
      .name{
        // height: 50px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 18px;
        padding: 0 16px 0;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
      }
      .icon{
        display: none;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 28px;
        height: 28px;
        border-radius: 10px 0 10px 0;
        background: rgba(227, 66, 52, 1);        
        align-items: center;
        justify-content: center;
        svg{
          width: 24px;
          path{
            fill: #fff;
          }
        }
      }
    }
   }             
</style>
<style lang="scss">
   .myDialog {
      background: #4B4759;
      padding-left: 24px;
      padding-right: 24px;
      .el-dialog__header.show-close{
        border-bottom: 1px solid  #5F4F55;;
      }
      .el-icon.el-dialog__close{
        color: #fff;
      }
    }   
</style>